import React from 'react'
import Modal from '../Modal'
class LoginButton extends React.Component{
    state={
        showAuth:0,
        chooseZone:86,
        telephoneActive:0,
        codeActive:0,
        loginWay:0,
        picA:1,
        picB:0,
        picC:0
    }
    
    ifCodeActive=()=>{
        if(this.state.codeActive===1)
            this.setState({
                codeActive:0
            })
    }
    ifTelephoneActive=()=>{
        if(this.state.telephoneActive===1)
            this.setState({
                telephoneActive:0
            })
    }
    changeLoginWay=()=>{
        if(this.state.loginWay===0)
            this.setState({
                loginWay:1
            })
        else
            this.setState({
                loginWay:0
            })
    }
    changePicA=()=>{
        this.setState({
            picA:1,
            picB:0,
            picC:0
        })
    }
    changePicB=()=>{
        this.setState({
            picA:0,
            picB:1,
            picC:0
        })
    }
    changePicC=()=>{
        this.setState({
            picA:0,
            picB:0,
            picC:1
        })
    }
    render(){
        let a = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ad7fa76844a2df5c03151ead0ce65ea6.svg'
        let b = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/500c1180a96859e5c54a5359f024a397.svg'
        let c = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/4f6f6f316cde4398d201cd67e44ddea3.svg'
        let down = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/9236ee867298dfc6904551b9a1e61956.svg'
        let weibo = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/fa758ebd6691cf5931bbbed63230327b.svg'
        let wechat = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e0ff12435b30910520c9a3aac9b90487.svg'
        let github = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/547dd8a9450cd7be39ff97c40a23e794.svg'
        let close = <svg t="1626594987244" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8105" width="14" height="14"><path d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" p-id="8106"></path></svg>
        return(
            <div style={{height:'100%',display:'flex',justifyContent:'center',alignItems:'center'}}>
                <button onClick={()=>{this.setState({showAuth:1});document.body.style.overflow = 'hidden'}} style={{border:'1px solid #007FFF',color:'#007FFF',backgroundColor:'#fff',padding:'3.6px 20.4px',fontSize:'16px',lineHeight:'22px',textAlign:'center'}}>登录</button>
                <Modal>
                    <div className='authModalBox'  onClick={()=>{this.setState({showAuth:0});document.body.style.overflow = ''}} style={{display:this.state.showAuth===1?'flex':'none',alignItems:'center',justifyContent:'center',backgroundColor:'rgba(0,0,0,0.3)',height:812,width:375}}>
                        <div className='authForm' onClick={event=>{event.stopPropagation();this.ifCodeActive();this.ifTelephoneActive()}}  style={{position:'relative',padding:'24px',height:this.state.loginWay===0?308:368,borderRadius:'2px',width:318,maxWidth:'100%',fontSize:'1.167rem',backgroundColor:'#fff',boxSizing:'border-box'}}>
                            <div className='panfish'>
                                <img src={a} alt='' onClick={this.changePicB} style={{position:'absolute',transform:'translate(-50%,-116.6%)',width:132,left:'50%',zIndex:'1',display:this.state.picA===0?'none':''}}></img>
                                <img src={b} alt='' onClick={this.changePicA} style={{position:'absolute',transform:'translate(-50%,-118.6%)',width:132,left:'50%',zIndex:'1',display:this.state.picB===0?'none':''}}></img>
                                <img src={c} alt='' onClick={this.changePicA} style={{position:'absolute',transform:'translate(-50%,-128.6%)',width:132,left:'50%',zIndex:'1',display:this.state.picC===0?'none':''}}></img>
                            </div>
                            <div className='title' style={{height:24,lineHeight:'24px',display:'flex',justifyContent:'space-between',marginBottom:'24px'}}>
                                <div className='content' style={{fontSize:'18px',fontWeight:'bold',color:'#333'}}>
                                    {this.state.loginWay===0?'手机登录':'账密登录'}
                                </div>
                                <div className='closeBottom' onClick={()=>{this.setState({showAuth:0});document.body.style.overflow = ''}}>
                                    {close}
                                </div>  
                            </div>
                            <div className='input-mobile'  style={{height:90,marginBottom:'6px'}}>
                                <div className='inputTelephone'   onClick={(event)=>{event.stopPropagation();this.setState({telephoneActive:1});this.ifCodeActive();this.changePicB()}} style={{padding:this.state.loginWay===0?'0 10px':'',height:35,display:'flex',marginBottom:'10px',borderRadius:'2px',justifyContent:'center',alignItems:'center',border:this.state.telephoneActive===0?'1px solid #d9d9d9':'solid 1px #1E80FF'}}>
                                    <div className='chooseZone' style={{display:this.state.loginWay===0?'flex':'none',width:62,height:18,lineHeight:'18px',fontSize:'14px',justifyContent:'space-between',alignItems:'center'}}>
                                        <div className='chosen'>
                                        +{this.state.chooseZone}
                                        </div>
                                        <img src={down} alt='' width='12px' height='12px'></img>
                                    </div>
                                    <input className='mobile' placeholder='请输入手机号码' style={{display:this.state.loginWay===0?'':'none',overflow:'visible',border:'none',boxSizing:'border-box',borderRadius:'2px',padding:'10px',height:35,outline:'none',fontSize:'14px'}}>
                                    </input>
                                    <input className='loginPhoneOrEmail' placeholder='邮箱/手机号（国际号码加区号）' style={{display:this.state.loginWay===0?'none':'',width:'100%',padding:'10px',border:'none',borderRadius:'2px',boxSizing:'border-box',overflow:'visible',outline:'none'}}>
                                    </input>
                                </div>
                                <div className='inputBox'   onClick={(event)=>{event.stopPropagation();this.setState({codeActive:1});this.ifTelephoneActive();this.changePicC()}} style={{height:37,display:'flex',border:this.state.codeActive===0?'1px solid #d9d9d9':'solid 1px #1E80FF',justifyContent:'space-between'}}>  
                                    <input className='code' placeholder='验证码' style={{display:this.state.loginWay===0?'':'none',overflow:'visible',border:'none',boxSizing:'border-box',outline:'none',fontSize:'14px',padding:'10px',borderRadius:'2px'}}></input>
                                    <button className='sendCode' style={{display:this.state.loginWay===0?'':'none',color:'#007fff',position:'relative',border:'none',borderRadius:'2px',backgroundColor:'transparent',fontSize:'13px',cursor:'pointer'}}>获取验证码</button>
                                    <input className='loginPassword'  placeholder='请输入密码' style={{display:this.state.loginWay===0?'none':'',outline:'none',padding:'10px',boxSizing:'border-box',borderRadius:'2px',width:'100%',border:'none'}}></input>
                                </div>
                            </div>
                            <button className='loginButton' style={{marginTop:'5px',backgroundColor:'#007fff',borderRadius:'2px',color:'#fff',boxSizing:'border-box',height:40,width:'100%',cursor:'pointer',border:'none',fontSize:'14px'}}>
                                登录
                            </button>
                            <div className='promptBox' style={{marginTop:12,height:18,display:'flex',justifyContent:'space-between'}}>
                                <div  className='changeLogin' onClick={()=>{this.changeLoginWay();this.changePicA()}} style={{fontSize:'14px',color:'#007fff',cursor:'pointer',lineHeight:'18px'}}>
                                    {this.state.loginWay===0?'其他登录方式':'手机登录'}
                                </div>
                                <div className='forgetPassword' style={{fontSize:'14px',color:'#007fff',cursor:'pointer',lineHeight:'18px',display:this.state.loginWay===0?'none':''}}>
                                    忘记密码
                                </div>
                            </div>
                            <div className='oauth' style={{marginTop:15,display:this.state.loginWay===0?'none':'flex',alignItems:'center',justifyContent:'space-around'}}>
                                <div className='oauthBg' style={{width:45,height:45,borderRadius:'50%',display:'flex',backgroundColor:'#f4f8fb',alignItems:'center',justifyContent:'center'}}>
                                    <img src={weibo} alt='' style={{cursor:'pointer',height:23,width:23}}></img>
                                </div>
                                <div className='oauthBg' style={{width:45,height:45,borderRadius:'50%',display:'flex',backgroundColor:'#f4f8fb',alignItems:'center',justifyContent:'center'}}>
                                    <img src={wechat} alt='' style={{cursor:'pointer',height:23,width:23}}></img>
                                </div>
                                <div className='oauthBg' style={{width:45,height:45,borderRadius:'50%',display:'flex',backgroundColor:'#f4f8fb',alignItems:'center',justifyContent:'center'}}>
                                    <img src={github} alt='' style={{cursor:'pointer',height:23,width:23}}></img>
                                </div>
                            </div>
                            <div className='agreementBox' style={{marginTop:20,fontSize:'14px',height:18,lineHeight:'18px',color:'#767676',display:'flex',justifyContent:'space-between'}}>
                                注册登录即表示同意
                                <div  className='terms' style={{color:'#007fff'}}>
                                    用户协议
                                </div>
                                、
                                <div className='privacy' style={{color:'#007fff'}}>
                                    隐私政策
                                </div> 
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }

}
export default LoginButton